<template>
  <view class="container">
    <!-- 顶部背景 -->
    <view class="header">
      <text class="title">问白 ——德化窑白瓷精品展</text>
      <text class="time">2025-03-27 09:00 ~ 10:00</text>
    </view>

  <!-- 表单区域 -->
     <view class="form">
       <text class="form-tip">请您填写资料，带*号为必填项</text>
       <view class="input-item">
         <view class="label">
           <text class="required">*</text>
           <text>姓名：</text>
         </view>
         <input 
           class="input" 
           placeholder="请输入姓名" 
           v-model="form.reservationName"
           placeholder-class="placeholder"
         />
       </view>
       <view class="input-item">
         <view class="label">
           <text class="required">*</text>
           <text>手机：</text>
         </view>
         <input 
           class="input" 
           placeholder="请输入手机号" 
           v-model="form.phone"
           type="number"
           placeholder-class="placeholder"
         />
       </view>
	   <view class="input-item">
	     <view class="label">
	       <text class="required">*</text>
	       <text>身份证：</text>
	     </view>
	     <input 
	       class="input" 
	       placeholder="请输入身份证" 
	       v-model="form.idNumber"
	       type="number"
	       placeholder-class="placeholder"
	     />
	   </view>
     </view>
 
     <!-- 提交按钮 -->
     <view class="submit-btn" @click="handleSubmit">
       提交
     </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
		lotid:'',
		pid:uni.getStorageSync('pId'),
		reservationId:'',
		creatime:'',
		reservationName:'',
		idNumber:'',
		phone:'',
      }
    };
  },
  onLoad(option) {
  	this.form.reservationId = option.reservationid
	this.form.lotid = option.id
  },
  methods: {
    // 更改时段
    handleChangeTime() {
      uni.showToast({ title: '更改时段', icon: 'none' });
    },

    // 提交表单
    handleSubmit() {
      if (!this.form.reservationName) {
        uni.showToast({ title: '请输入姓名', icon: 'none' });
        return;
      }
      if (!this.form.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' });
        return;
      }
	  if (!this.form.idNumber) {
	    uni.showToast({ title: '请输入手机号', icon: 'none' });
	    return;
	  }
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        uni.showToast({ title: '手机号格式错误', icon: 'none' });
        return;
      }
	  this.$rqt.createReservationsPeople(this.form).then((res) => {
	  	if (res.code == 200) {
			uni.showToast({ title: '预约成功', icon: 'none' });
			uni.reLaunch({
				// 
				// reservationId
				// phone
				url:'/pages/indexOther/success?data='+JSON.stringify(this.form)
			})
	  		uni.hideLoading()
	  	}
	  	uni.hideLoading()
	  })
	  
	  
	  
      uni.showToast({ title: '提交成功', icon: 'success' });
    }
  }
};
</script>

<style lang="scss">
/* 全局样式 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

/* 顶部背景 */
.header {
  text-align: center;
  padding: 40rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 20rpx;
  }
  .time {
    font-size: 32rpx;
    color: #000;
    display: block;
    margin-bottom: 20rpx;
  }
  .change-time {
    font-size: 28rpx;
    color: #e64340;
    text-decoration: underline;
  }
}

/* 表单区域 */
.form {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  .form-tip {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
    display: block;
  }
  .input-item {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    .label {
      font-size: 28rpx;
      color: #333;
      display: flex;
      align-items: center;
      margin-right: 20rpx;
      .required {
        color: #e64340;
        margin-right: 4rpx;
      }
    }
    .input {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333;
      background-color: transparent; /* 移除背景 */
      border: none; /* 移除边框 */
      outline: none; /* 移除聚焦时的默认边框 */

      &:focus {
        border: none; /* 移除聚焦时的边框 */
        box-shadow: none; /* 移除聚焦时的阴影 */
      }
    }
    .placeholder {
      color: #999;
    }
  }
}

/* 提交按钮 */
.submit-btn {
  margin-top: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #e64340;
  color: #fff;
  font-size: 32rpx;
  border-radius: 50rpx;
  box-shadow: 0 4rpx 10rpx rgba(230, 67, 64, 0.3);
  transition: background-color 0.3s ease;

  &:active {
    background-color: #d43836;
  }
}
</style>